<!--created by Chuanpeng.zhu@dhc.com.cn-->
<ion-view view-title="数据持久化实例">
  <ion-content>
    <ion-refresher pulling-text="下拉刷新" refreshing-text="正在刷新" on-refresh="init()"></ion-refresher>
    <div class="padding">
      本例展示两种数据存储方式。
      <ul style="list-style-type: disc;
          display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;">
        <li>内存缓存——CacheService</li>
        <li>持久化储存——$localStorage</li>
      </ul>
      下面的案例演示了两种模式的增删改查：
      <div class="width-100 background ">
        <div class="padding">
          <label>
            待办事项：
            <input class="padding-left-right-10 inline-block" type="text" ng-model="data.value">
          </label>
          <button class="button button-outline button-assertive button-small padding-left-right-20"
                  ng-click="addTodo()">
            确定
          </button>
        </div>
        <div>
          <label>
            <input type="radio" ng-model="data.cacheOrStorage" value="cache">
            Cache
          </label>
          <label>
            <input type="radio" ng-model="data.cacheOrStorage" value="storage">
            localStorage
          </label>
        </div>
      </div>
      <ul style="list-style-type: disc;
          display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;">
        <li ng-repeat="item in todoList track by $index">
          <span ng-bind="item"></span><i class="icon ion-close-circled font-size-icon margin-left-20"
                                         ng-click="deleteTodo($index)"></i>
        </li>
      </ul>
      <div class="border border-radius padding background">
        实验步骤：<br/>
        1.随意添加一些todo事项。<br/>
        2.在input中输入一些内容，然后下拉刷新。实验结果，页面内容刷新，但是下面的todo事项仍然显示。<br/>
        3.按键盘F5或者Ctrl+R刷新页面。实验结果todo事项消失。<br/>
        4.切换到localStorage模式，重复1.2.3步骤，发现todo事项一直存在。<br/>
        说明：<br/>
        默认cache模式，cache存储数据生命周期和页面一样。在页面刷新后消失。<br/>
        storage模式，是放在localStorage中。如果不清空的话，会持久存在。<br/>
        Tip:打开谷歌浏览器，F12开发者模式，可以看到本地存储的内容<br/>
        <img ng-src="./img/save_example.png" class="width-100"/>
        <mark>Warning:localStorage只能存储5M的东西。</mark>
      </div>
    </div>
  </ion-content>
</ion-view>
